<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>产品交接单</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/elementui/index.css">
</head>
<body>
<div id="app">
    <div>
        交接单查询：&nbsp;&nbsp;&nbsp;<el-input
            placeholder="输入订单编号"
            size="mini"
            style="width: 200px"
            v-model="input"></el-input>
        &nbsp;&nbsp;&nbsp;
        入库时间：&nbsp;&nbsp;&nbsp;<el-date-picker
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                  v-model="input1" style="width: 200px" size="mini"></el-date-picker>
  &nbsp;&nbsp;&nbsp;<el-button type="primary" size="mini" icon="el-icon-search" @click="selectByNum">搜索</el-button>
    </div>
    <p></p>
    <p></p>
    <el-button type="warning" @click="dialogFormVisible = true">新增交接单</el-button>
    <el-button type="primary" @click="printHandover">打印交接单</el-button>
    <el-button type="danger" @click="delAll">批量删除</el-button>
    <template>
        <el-table
                ref="multipleTable"
                :data="productHandovers"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="交接单号"
                    width="120">
                <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column
                    label="订单编号"
                    width="120">
                <template slot-scope="scope">{{ scope.row.orderId }}</template>
            </el-table-column>
            <el-table-column
                    prop="pname"
                    label="产品名称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="penterprise"
                    label="产品型号"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="productionName"
                    label="生产部门"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="wareName"
                    label="收货仓库"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="num"
                    label="入库数量"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="handoverDate"
                    label="交接日期"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="head"
                    label="交接人"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="remake"
                    label="备注"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    label="状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.state==1" style="color: red">已被查看</span>
                    <span v-else style="color: red">未被查看</span>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[2, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <!--添加交接单的对话框-->
    <el-dialog title="添加交接单" :visible.sync="dialogFormVisible" @close="closeMyDialog">
        <el-form :model="productHandover">
            <el-form-item label="订单编号" :label-width="formLabelWidth">
                <el-select v-model="productHandover.orderId" placeholder="请选择" >
                    <el-option  v-for="(item,index) in orders"
                                :key="item.orderId"
                                :label="item.orderId"
                                :value="item.orderId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="收货仓库">
                <el-select v-model="productHandover.wareName" placeholder="请选择" >
                    <el-option  v-for="(item,index) in wares"
                                :key="item.wareName"
                                :label="item.wareName"
                                :value="item.wareName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="入库数量" :label-width="formLabelWidth">
                <el-input v-model="productHandover.num" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="交接日期">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="productHandover.handoverDate" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="交接人" :label-width="formLabelWidth">
                <el-input v-model="productHandover.head" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="productHandover.remake" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveProductHandover">确 定</el-button>
        </div>
    </el-dialog>
    <!--批量删除交接单的对话框-->
    <el-dialog title="删除交接单" :visible.sync="dialogFormVisible2" @close="closeMyDialog">
        <span style="text-align: center">确定要删除这些交接单吗</span>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="deleteProductHandover">确 定</el-button>
        </div>
    </el-dialog>
</div>
<!-- 引入组件库 -->
<script src="/qs/qs.min.js"></script>
<script src="/vue/vue.js"></script>
<script src="/axios/axios.min.js"></script>
<script src="/elementui/index.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                total: 0,//总条数
                current: 0,//当前页数
                pageSize: 2, //每页条数
                productHandovers:null,
                multipleSelection: [],
                input:'',
                input1:'',
                productHandover:{
                    //交接单对话框的数据
                    id: '',
                    orderId: '',
                    pname: '',
                    penterprise: '',
                    productionName: '',
                    wareName: '',
                    num: '',
                    handoverDate: '',
                    head:'',
                    remake:'',
                    state:''
                },
                dialogFormVisible: false,//控制对话框的显示
                formLabelWidth: '120px',//表单标签的宽度
                dialogFormVisible2:false,
                delarr:[],//删除的id数组
                orders:null,
                wares:null
            }
        },
        methods: {
            handleSizeChange(val) {
                if(this.input!=''&&this.input!=null||this.input1!=null&&this.input1!=''){
                    this.pageSize=val;
                    this.selectByNum(this.input,this.input1);
                }else {
                    this.loadPage(this.current,val);
                }

            },
            handleCurrentChange(val) {
                if(this.input!=''&&this.input!=null||this.input1!=null&&this.input1!=''){
                    this.current=val;
                    this.selectByNum(this.input,this.input1);
                }else {
                    this.loadPage(val,this.pageSize)
                }
            },
            //当前页跳转的方法
            loadPage(current,pageSize) {
                this.current=current ;
                this.pageSize=pageSize ;
                //查询商品
                axios.get("/productHandovers?current=" + current+"&"+"pageSize="+pageSize).then(value => {
                        if (value.data.state == 1) {
                            this.productHandovers = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    },
                )},
            //关闭对话框
            closeMyDialog(){
                //清空数据
                this.productHandover = {      //产品对话框的数据
                    id: '',
                    orderId: '',
                    pname: '',
                    penterprise: '',
                    productionName: '',
                    wareName: '',
                    num: '',
                    handoverDate: '',
                    head:'',
                    remake:'',
                    state:''
                },
                this.multipleSelection=null
            },
            //添加交接单
            saveProductHandover(){
                    axios.post("/productHandover",{
                        orderId:this.productHandover.orderId,
                        wareName:this.productHandover.wareName,
                        num:this.productHandover.num,
                        handoverDate:this.productHandover.handoverDate,
                        head:this.productHandover.head,
                        remake:this.productHandover.remake,
                    }).then(value => {
                        if(value.data.state==1) {
                            this.loadPage(1,this.pageSize)
                        }
                    }),
                        this.dialogFormVisible = false;
                },
            //按编号查询打印机
            selectByNum(orderId,handoverDate){
                orderId=this.input;
                handoverDate=this.input1;
                if(handoverDate==null){
                    handoverDate='';
                }
                if (orderId!=''||handoverDate!=''){
                    axios.get("/productHandovers/like?orderId="+orderId+"&"+"handoverDate="+handoverDate+"&current="+this.current+"&"+"pageSize="+this.pageSize,{
                    }).then(value => {
                        if(value.data.state==1) {
                            this.productHandovers = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    })
                }else {
                    this.loadPage(1,this.pageSize)
                }
            },
            //选中哪些
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //添加删除的id数组
            delAll() {
                const length = this.multipleSelection.length;
                if(length!=0){
                    this.dialogFormVisible2 = true;//显示删除弹框
                    for (let i = 0; i < length; i++) {
                        this.delarr.push(this.multipleSelection[i].id)
                    }
                }else {
                    this.open1();
                }

            },
            open() {
                this.$alert('请选择需要打印的订单编号', '提示', {
                    confirmButtonText: '确定',
                });
            },
            open1() {
                this.$alert('请选择需要删除的订单编号', '提示', {
                    confirmButtonText: '确定',
                });
            },
            //批量删除
            deleteProductHandover(arrs){
                arrs=this.delarr;
                axios.delete("/productHandovers?ids="+arrs).then(value => {
                    if (value.data.state==1){
                        this.loadPage(1,this.pageSize)
                    }
                }),
                    this.dialogFormVisible2 = false;
            },

            //打印交接单
            printHandover(arrs){
                const length = this.multipleSelection.length;
                if(length!=0){
                    for (let i = 0; i < length; i++) {
                        this.delarr.push(this.multipleSelection[i].id)
                    }
                    arrs=this.delarr;
                    axios.get("/printHandover?ids="+arrs).then(value => {
                        if(value.data.state==1){
                            location.href="/company-handover.html";
                        }
                    })
                }else {
                    this.open();
                }

            }
        },
        mounted(){
            this.loadPage(1,this.pageSize),
                axios.get("/handoverOrderId").then(value => {
                    if(value.data.state==1){
                        this.orders=value.data.data;
                    }
                });
            axios.get("/wares").then(value => {
                if(value.data.state==1){
                    this.wares=value.data.data;
                }
            })

        }
    })
</script>

</body>
</html>